<template>
  <div>
    <div class="common-form" v-for="item in cartList" :key="item.cart_id" @touchstart="showDeleteButton(item.cart_id)" @touchend="clearLoop">
		<div class="order-shop cart-shop">
			<div class="order-shop-info cart-info">
				<!-- cart-select-pink -->
				<label>
					<em class="cart-select">
						<input 	type="checkbox"
								:checked="fruitIds.indexOf(item.cart_id)>=0"
								name="checkboxinput"
								class="input-checkbox"
								@click="checkedOne(item.cart_id ,item.price,item.attr_id,item.quantity,item.goods_id)">
					</em>
				</label>
				
				<img :src="url + item.thumbnail">
				<div>
					<p>{{item.goods_title}}</p>
					<p>{{item.spec_1}} &nbsp; {{item.spec_2}} &nbsp; {{item.quantity}}件</p>
					<p>￥{{item.price}}</p>
				</div>
				<!-- <span class="cart-number">
					<em class="cart-sub">-</em>
					<em class="cart-num"><input type="text" value="1"/></em>
					<em class="cart-add">+</em>
				</span> -->
			</div>
		</div>
	</div>


    <!-- <div v-for="fruite in cartList"
         :key="fruite.id"
         class="fruiteList">
      <input type="checkbox"
             :checked="fruitIds.indexOf(fruite.id)>=0"
             name="checkboxinput"
             class="input-checkbox"
             @click="checkedOne(fruite.id)">
      <label>{{fruite.value}}</label>
    </div> -->
	<!-- 全选 -->
    <!-- <button @click="deleteSome">Delete</button> -->
	<div style="width:100%; height:60px;"></div>
	<div class="detail-footer">
		<div class="cart-total">
			<span>
				<!-- <em></em> 全选 -->
				<label>
					<input type="checkbox"
					class="input-checkbox"
					:checked="cartList.length === fruitIds.length && fruitIds.length"
					@click="checkedAll" />
				全选</label>
			</span>
			<span>合计:<em>￥{{total}}</em></span>
		</div>
		
		<div class="cart-balance">
			<a @click="jiesuan">去结算</a>
		</div>
	</div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  	data () {
    	return {
			url:'http://api.huiwanzhong365.com',
			fruitIds: [],
			// 初始化全选按钮, 默认不选
			isCheckedAll: false,
			cartList:[],
			total:0,
			cart:[],
			car:'',
    	}
  	},
  	methods: {
		//购物车列表
		list:function(){
			var openid = localStorage.getItem("openid")
			// var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
			var draw = {
				openid:openid,
			}
			this.$http.post('/index/user/shoppingcart',qs.stringify(draw)).then(rs=>{
				console.log(rs.data)
				this.cartList = rs.data
			}).catch(err=>{
				console.log(err)
			})
		},
		checkedOne (fruitId,price,attr_id,quantity,goods_id) {
			let idIndex = this.fruitIds.indexOf(fruitId)
			if (idIndex >= 0) {//如果已经包含就去除
				this.fruitIds.splice(idIndex, 1)
				this.total = this.total - Number(price);
				this.car = {
					goods_id:goods_id,
					attr_id :attr_id,
					quantity:quantity,
					price:price
				}
				this.cart.splice(this.car ,1)
				// console.log(this.cart)
				// console.log(this.fruitIds)
			} else {//如果没有包含就添加
				this.car = {
					goods_id:goods_id,
					attr_id :attr_id,
					quantity:quantity,
					price:price
				}
				this.cart.push(this.car)
				this.fruitIds.push(fruitId)
				this.total = this.total + Number(price);
				// console.log(this.cart)
				// console.log(this.fruitIds)
			}
		},
		checkedAll (e) {
			//console.log(e)
			this.isCheckedAll = e.target.checked;
			if (this.isCheckedAll) {//全选时
				this.fruitIds = []
				this.cartList.forEach(item => {
					this.fruitIds.push(item.cart_id)
					this.total = this.total + Number(item.price);
					this.car = {
						goods_id:item.goods_id,
						attr_id :item.attr_id,
						quantity:item.quantity,
						price:item.price
					}
					this.cart.push(this.car)
				})
				// console.log(this.cart)
			} else {
				this.fruitIds = []
				this.total = 0
			}
		},
		
		// 结算
		jiesuan:function(){
			console.log(this.cart)
			this.$router.push({name:'Gorder',query:{ cart : this.cart }});
			sessionStorage.setItem('cart',JSON.stringify(this.cart))
			sessionStorage.setItem('total',JSON.stringify(this.total))
		},
		// 长按删除
		showDeleteButton(e) {

			var that = this;
			this.Loop = setTimeout(function(){
				var openid =  localStorage.getItem("openid")
				layer.open({
					content: '确定要删除此商品'
					,btn: ['确定', '不要']
					,yes: function(index){
						// location.reload();
						var upload = {
							openid:openid,
							cart_id:e
						}
						that.$http.post('/index/user/deleteShoppingCart',qs.stringify(upload)).then(rs=>{
							console.log(rs.data.id)
							console.log('删除成功')
							that.list();
							//this.tabIndex = rs.data.id
						}).catch(err=>{
							console.log(err)
						})
						layer.close(index);
					}
				});
				
			},1000);
		},
		clearLoop(e) {
			clearInterval(this.Loop);
		},
	  },
	  mounted(){
			this.list();
			// var s = {}
			// s.goods_id = 11;
			// s.attr_id = 123;
			// console.log(s)
			// var arr = []
			// for (let index = 0; index < 4; index++) {
			// 	arr.push(s)
			// }
			// console.log(arr);
		}
}
</script>
<style scoped>

/*购物车*/
.cart-select{
    /* width: 10px;
    height: 10px;
    border: 1px solid rgba(187, 187, 187, 1); */
	border-radius: 50%;
    display: inline-block;
    float: left;
	position: absolute;
    top: 37%;
    left: -20px;
}
input[type="checkbox"]{
	width:16px;
	height:16px;
	display: inline-block;
	text-align: center;
	vertical-align: middle; 
	line-height: 14px;
	position: relative;
}
input[type="checkbox"]::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 100%;
	height: 100%;
	border: 1px solid #d9d9d9
}
input[type="checkbox"]:checked::before{
	content: "\2713";
	background-color: #fff;
	position: absolute;
	top: 0;left: 0;
	width:100%;
	border: 1px solid #FC2847;
	color:#FC2847;
	font-size: 15px;
	font-weight: bold;
}

.cart_select_pink{
    background-color: rgba(252, 40, 71, 1);
    border: 1px solid rgba(252, 40, 71, 1)!important;	
}
.cart-shop{
	width: 94%;
    margin: 3% auto;
    display: inline-block;
    margin-left: 3%;
}
.cart-shop img{
	width: 80px;
	height: 80px;
	border-radius: 5px;
	float: left;
}
.cart-info{
	margin-left: 20px;
	position: relative;
}
.cart-info div{
	width: 68%;
}
.cart-total{
	width:70%;
	background: #FFF;
	float: left;
}
.cart-total span:nth-child(1){
	line-height: 56px;
	padding:10px;
}
.cart-total span:nth-child(1) em{
	width: 10px;
    height: 10px;
    background-color: rgba(252, 40, 71, 1);
    border: 1px solid rgba(252, 40, 71, 1)!important;
    border-radius: 50%;
    float: left;
    margin-top: 18px;
    margin-left: 11px;
}
.cart-total span:nth-child(2) em{
	color:#FC2847;
	font-size:16px;
}
.cart-balance{
	width:30%;
	background: #FC2847;
	float: left;
}
.cart-balance a{
	width:100% !important;
	height:56px;
	text-align: center !important;
	color:#FFF;
	line-height: 56px;
}
.cart-number{
    display: inline-block;
    position: absolute;
    right: 22px;
    bottom: 0;
}
.cart-sub,.cart-add{
	font-size:20px;
	width:25px;
	height:25px;
	text-align: center;
	line-height: 25px;
	float: left;
}
.cart-num input{
	float: left !important;
	height:25px;
	width:40px;
	border:0;
	line-height: 25px;
	text-align: center;
	background-color: rgba(254, 39, 70, 0.08);
	font-size:12px;
	border-radius: 20px;
}
.cart-shop img{
	margin-left: 2%;
}
.order-shop-info{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    margin-top:10px;	
}
.order-shop-info div{
    float: left;
    margin-left: 2%;
    width: 68%;
}
.order-shop-info div p:nth-child(1){
	width:100%;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-shop-info div p:nth-child(2){
	color:#999;
	margin:10px 0;
	font-size:12px;
}
.order-shop-info div p:nth-child(3){
	color:#FE2746;
	font-weight: 600;
}
.order-shop-info div p:nth-child(3) del{
	color:#999;
	font-size:12px;
	font-weight: normal;
}



</style>